<template>
  <div class="genjiedian">
    <div class="hthd">
      <h2>天猫后台管理系统</h2>
    </div>
    <div class="asd">
      <!-- :span="4" -->
      <el-row class="tac asds">
        <el-col style="width: 200px" class="fl">
          <!-- <h5>自定义颜色</h5> -->
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select="op"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">操作用户</span>
            </el-menu-item>
              <!-- <el-menu-item index="1-1">添加商铺</el-menu-item>
                <el-menu-item index="1-2">修改商铺</el-menu-item>
                <el-menu-item index="1-3">添加商品</el-menu-item>
                 <el-menu-item index="1-4">修改商品</el-menu-item> -->
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>操作商铺、商品</span>
              </template>
              <el-menu-item-group>
                <template slot="title">商铺</template>
                <el-menu-item index="1-1">添加商铺</el-menu-item>
                <el-menu-item index="1-2">修改商铺</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="商品">
                <el-menu-item index="1-3">添加商品</el-menu-item>
              </el-menu-item-group>
                <el-menu-item index="1-4">修改商品</el-menu-item>
              <!-- <el-submenu index="1-4">
                <template slot="title" index="4">修改商品</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu> -->
            </el-submenu>
            <!-- <el-menu-item index="3" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item> -->
            <!-- <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item> -->
          </el-menu>
        </el-col>
      </el-row>
      <div class="fr dhr">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  created(){
    axios.get("/api/hduser").then((data)=>{
           if(!data.data){
               this.$router.push("/hdlogin")
           }
        })
  },
  methods:{
     handleClick(row) {
        console.log(11)
      console.log(row);
    },
    handleOpen(key, keyPath) {
      console.log(22)
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
       console.log(33)
      console.log(key, keyPath);
    },
    op(key,keyPath){
     if(key==2){
       this.$router.push("/houtai")
     }
     if(key=="1-1"){
       this.$router.push("/houtai/tjspu")
     }
     if(key=="1-2"){
       this.$router.push("/houtai/xgdp")
     }
     if(key=="1-3"){
       this.$router.push("/houtai/tjspin")
     }
     if(key=="1-4"){
       console.log(123)
       this.$router.push("/houtai/dpyilan")
     }
    }
  }
}
</script>

<style>
.hid {
  display: none;
}
.youbian {
  float: right;
}
.asd {
  width: 1190px;
  overflow: hidden;
  margin: 0 auto;
}
.asds {
  width: 200px;
  display: inline-block;
}
.hthd {
  width: 1200px;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  margin: 0 auto;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.zenjiadp {
  width: 900px;
}
.cjh {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.cj{
  margin-bottom: 10px;
}
.shangchuantupian{
  margin-bottom: 10px;
}
.dianpuxx{
  margin: 30px 0 30px 0;
}
/* .shurukuang{
  
} */
.upload-demo li{
  width: 200px;
}
.dhr{
  overflow: hidden;
}
</style>


